<template>
	<view class="list">
		<section-bar :title="title" />
		<view class="content">
			<view class="item" v-for="(item, index) in list" :key="index" @click="itemClick(item)">
				<image class="img" :src="item.icon" mode="widthFix"></image>
				<view class="text">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		usePersonalStore
	} from '../../../../store'
	defineProps({
		title: {
			type: String,
			default: '标题'
		},
		list: {
			type: Array,
			default: () => []
		}
	})

	const personStore = usePersonalStore()
	const itemClick = (item) => {
		if (item.path) {
			uni.navigateTo({
				url: item.path
			})
		}

		if (item.text === '签到打卡') {
			const {
				userName
			} = uni.getStorageSync('userInfo')
			uni.request({
				url: 'http://localhost:3000/checkin/create',
				method: "POST",
				data: {
					"userName": userName,
				},
				success(res) {
					uni.showToast({
						title: res.data.msg
					});
					// 更新积分
					personStore.getMyIntegralAction()
				}
			})
		}
	}
</script>

<style lang="scss">
	.list {
		margin-top: 20rpx;
		border-radius: 20rpx;
		border: 8rpx solid #fff;

		.content {
			display: flex;
			padding: 20rpx 0;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 70rpx;
					height: 70rpx;
				}

				.text {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: $text-color;
				}
			}
		}
	}
</style>